<script setup>
  import { CHAT_EXTENSION_LIST } from '@/contants/message'
  import { uploadFile2OSS } from '@/utils/uploadFile'

  const emit = defineEmits(['success'])

  // 点击上传
  const onClick = ({ key }) => {
    // 相册中选择图片或拍照
    uni.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: [key === 'zhaopian' ? 'album' : 'camera'],
      // 选择成功
      success: async ({ tempFiles }) => {
        if (!tempFiles.length) return
        const [{ tempFilePath }] = tempFiles
        // 上传
        const filePath = await uploadFile2OSS({
          tempFilePath,
          fileType: 'image'
        })
        // 触发 success 事件, 携带文件路径
        emit('success', filePath)
      }
    })
  }
</script>

<template>
  <view class="extension">
    <view
      class="extension-item"
      v-for="item in CHAT_EXTENSION_LIST"
      :key="item.id"
      @click="onClick(item)"
    >
      <image
        :src="item.image"
        mode="scaleToFill"
        class="image"
      />
      <text class="text">{{ item.text }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .extension {
    display: flex;
    padding: 40rpx 30rpx;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 43rpx;
      .image {
        width: 140rpx;
        height: 140rpx;
      }
      .text {
        margin-top: 20rpx;
        font-size: var(--font-size-xs);
        color: var(--text-color-middle);
      }
    }
  }
</style>
